<template>
  <div v-if="!loadFail" class="placard-section">
    <el-form class="form-container">
      <paper>
        <div slot="paper-header">开户行详情界面</div>
        <div slot="paper-content">
          <el-form :data="placardDetail" class="form-container">
            <el-row :gutter="20" class="c-form-info__row-detail">
              <el-col :span="24" class="c-form-info__text">
                <div class="c-form-info__label c-form-info__label100">帐号类型：</div>
                <el-form-item class="c-form-info__item c-form-info__item100">
                  {{ placardDetail.title }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="c-form-info__row-detail">
              <el-col :span="24" class="c-form-info__text">
                <div class="c-form-info__label c-form-info__label100">账号主体：</div>
                <el-form-item class="c-form-info__item c-form-info__item100">
                  {{ placardDetail.shop_designated }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="c-form-info__row-detail">
              <el-col :span="24" class="c-form-info__text">
                <div class="c-form-info__label c-form-info__label100">账号：</div>
                <el-form-item class="c-form-info__item c-form-info__item100">
                  {{ placardDetail.shop_apply }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="c-form-info__row-detail">
              <el-col :span="24" class="c-form-info__text">
                <div class="c-form-info__label c-form-info__label100">开户行：</div>
                <el-form-item class="c-form-info__item c-form-info__item100">
                  {{ placardDetail.shop_business }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="c-form-info__row-detail">
              <el-col :span="24" class="c-form-info__text">
                <div class="c-form-info__label c-form-info__label100">选择的省份：</div>
                <el-form-item class="c-form-info__item c-form-info__item100">
                  {{ placardDetail.province_id }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </paper>
      <paper>
        <div slot="paper-content">
          <div class="placard-buttons">
            <template v-if="!isSaveLoading">
              <el-button type="primary">保存</el-button>
            </template>
            <template v-else>
              <el-button>保存中</el-button>
            </template>
            <el-button type="default">修改</el-button>
          </div>
        </div>
      </paper>
    </el-form>
  </div>
</template>
<script>
import Paper from '../components/paper'
export default {
  name: 'CardDetails',
  components: { Paper },
  data () {
    return {
      loading: false,
      loadFail: false,
      isSaveLoading: false,
      placardId: '',
      placardDetail: {}
    }
  }
}
</script>

<style lang="scss" scoped>
  .placard-buttons{
    float: right;
  }
</style>
